<template>
  <div class="order ddingdan">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane
              label="视频业务"
              text-color="#fff"
              name="first"
              class="shipingyewu"
            >
              <!-- <div class="classify">
                <el-select v-model="type" placeholder="请选择" @change="typeChang">
                  <el-option
                    v-for="item in voideList"
                    :key="item.id"
                    :label="item.bieming"
                    :value="item.id">
                  </el-option>
                </el-select>
              </div> -->
            </el-tab-pane>
            <el-tab-pane label="直播业务" name="second">
              <!--   <div class="classify">
                <el-select v-model="type" placeholder="请选择" @change="typeChang">
                  <el-option
                    v-for="item in streamingList"
                    :key="item.id"
                    :label="item.bieming"
                    :value="item.id">
                  </el-option>
                </el-select>
              </div> -->
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
    <div>
      <el-col :span="24" class="operation">
        <div class="block">
          <div class="classify">
            <el-select v-model="type" placeholder="请选择" @change="typeChang">
              <el-option
                v-for="item in inputList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <el-date-picker
            value-format="yyyy-MM-dd"
            class="timetable"
            v-model="searchTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="timeChange"
            popper-class="trillordersTimetable"
          >
          </el-date-picker>
          <el-button type="primary" @click="search">搜索</el-button>
        </div>
      </el-col>
      <el-col :span="24" class="exhibition">
        <div class="Thelistshows hidden-xs-only">
          <el-table :data="listData" stripe style="width: 100%">
            <el-table-column label="创建时间" width="250">
              <template slot-scope="scope">
                {{ scope.row.create_time.replace('T','').slice(0,19)}}
              </template>
            </el-table-column>
            <el-table-column prop="UUID" label="订单编号" width="200">
            </el-table-column>
            <el-table-column prop="dest_url" label="链接"> </el-table-column>
            <el-table-column prop="count" label="数量"> </el-table-column>
            <el-table-column prop="cur_pay" label="金额">
              <template slot-scope="scope">{{
                scope.row.cur_pay
              }}</template>
            </el-table-column>
            <!-- <el-table-column prop="tuifei" label="退费"> </el-table-column> -->
            <!-- <el-table-column prop="chae" label="差额"> </el-table-column> -->
            <el-table-column label="类型">
              <template slot-scope="scope">
                {{ scope.row.order_type===3?'快手视频':'快手直播'}}
              </template>
            </el-table-column>
            <!-- <el-table-column label="状态">
              <template slot-scope="scope">
                {{ scope.row.zhuangtai | typeFormat }}
              </template>
            </el-table-column> -->
            <template slot="empty" v-if="loding">
              <img class="data-pic" src="@/assets/BGT.png" alt="" />
            </template>
          </el-table>
        </div>
        <div class="Foldingbar hidden-sm-and-up">
          <el-collapse accordion>
            <!-- 移动端 -->
            <el-collapse-item v-for="item in listData" :key="item.id">
              <template slot="title">
                <span>订单号：&nbsp;{{ item.UUID }}</span>
                <span style="margin-left: 58px"
                  >类型：&nbsp;{{ item.order_type===3?'快手视频':'快手直播' }}</span
                >
              </template>
              <div class="tabledata">
                <span>数量: &nbsp;{{ item.count }} </span>
                <span>金额: &nbsp;{{ item.cur_pay }}</span>
                <!-- <span>状态: &nbsp;{{ item.zhuangtai | typeFormat }}</span> -->
              </div>

              <div>时间: &nbsp;{{ item.create_time }}</div>
              <div>任务链接: &nbsp;{{ item.dest_url }}</div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="trillordersPaging">
          <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 30, 50, 100]"
            :page-size="limt"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            popper-class="trillordersPagination"
          >
          </el-pagination>
        </div>
      </el-col>
    </div>
  </div>
</template>
<script>
import { _debounce1 } from "@/public/App";
export default {
  props: {},
  data() {
    return {
      inputList:[],
      commoditytype:3,
      order_type:3,
      listData:[],
      begin_time:'',
      end_time:'',
      page_index:1,
      page_cntL:10,
      merchandise_id:'',
      activeName: "first",
      list: [],
      searchTime: [],
      voideList: [],
      streamingList: [],
      tabList: [],
      type: "", //类型
      currentPage: 1, //当前页数
      limt: 10, //每页显示条数
      total: 0, //总条数
      kaishishu: 0, //开始数
      jieshu: 10, //结束数
      loding: false
    };
  },
  computed: {},
  created() {
    this.configuration();
    this.choiceBox()
  },
  mounted() {},
  watch: {
  },
  methods: {
    //输入框接口
 async  choiceBox(){
    let data={
      _type:this.commoditytype
    }
    const [err, res] = await this.$http.request({
      url:'/getMerchandiseInfo',
      method:'GET',
      data
    })
    if(err)  return
    console.log(res.data.data);
     this.inputList=res.data.data
    },
    //快手视频接口
    async configuration() {
      let data={
        begin_time:this.begin_time,
        end_time:this.end_time,
        order_type:this.order_type,
        page_index:this.page_index,
        page_cnt:this.page_cnt,
        merchandise_id:this.merchandise_id
      }
      const [err, res] = await this.$http.request({
        url: "/orderInfo",
        method: "GET",
        data
      });
      if (err) return;
      this.listData=res.data.data.data_list
      this.total=res.data.data.data_cnt
    },
    //tab切换
    handleClick: _debounce1(function(tab, e) {
      if(this.activeName==='first'){
        this.order_type=3
        this.type=''
      }
      if(this.activeName==='second'){
        this.order_type=4
        this.type=''
      }
      this.configuration()
    }),
    //改变一页显示条数
    handleSizeChange(num) {
      this.page_cnt=num
      // this.orderList();
      this.configuration()
    },
    //跳转
    handleCurrentChange(num) {
      this.page_index=num
      this.configuration()
    },
    timeChange(time) {
      this.currentPage = 1;
      this.kaishishu = 0;
      this.jieshu = this.limt;
      if (time) {
        this.searchTime = [time[0], time[1]];
      } else {
        this.searchTime = [];
      }
      // this.orderList();
    },
    //搜索触发
    search: _debounce1(function(e) {
      this.merchandise_id=this.type
      this.begin_time=this.searchTime[0],
      this.end_time=this.searchTime[1],
      this.configuration();
    }),
    //改变类型时
    typeChang() {
      this.currentPage = 1;
      this.kaishishu = 0;
      this.jieshu = this.limt;
      // this.orderList();
    }
  }
};
</script>

<style scoped lang="stylus">
@import './Wellquicklyorders.styl'
</style>
